<template>
  <el-row type="flex">
    <template v-for="(item,index) in queList" v-model="querys">
      <template v-if="item.i1">
        <el-col :lg="{span: item.width}">
          <div class="names">{{item.name}}:</div>
        </el-col>
        <el-col :lg="{span: 3}">
          <el-input v-model="querys[item.prop]" icon="delete2" :on-icon-click="del"></el-input>
        </el-col>
      </template>
      <template v-else-if="item.i2">
        <el-col :lg="{span: item.width}">
          <div class="names">{{item.name}}:</div>
        </el-col>
        <el-col :lg="{span: 3}">
          <el-date-picker style="width: 160px"
                          v-model="querys[item.prop]"
                          type="date"
                          placeholder="选择日期">
          </el-date-picker>
        </el-col>
      </template>
      <template v-else="item.i3">
        <el-col :lg="{span: item.width}">
          <div class="names">{{item.name}}:</div>
        </el-col>
        <el-col :lg="{span: 3}">
          <el-select v-model="querys[item.prop]" clearable placeholder="请选择">
            <el-option
              v-for="i in item.i3"
              :key="i.value"
              :label="i.label"
              :value="i.value">
            </el-option>
          </el-select>
        </el-col>
      </template>
    </template>
    <template v-if="butFlag">
      <el-col :lg="{span: 6}">
        <el-button-group>
          <el-button @click="add" type="primary">添加</el-button>
          <el-button @click="query" type="primary">查询</el-button>
          <el-button @click="query" type="primary">实时刷新</el-button>
        </el-button-group>
      </el-col>
    </template>
    <template v-else-if="but">
      <el-col :lg="{span: 8, offset: 2}">
        <el-button-group>
          <el-button @click="query" type="primary">查询</el-button>
          <el-button @click="refund" type="primary">退款</el-button>
          <el-button @click="refresh" type="primary">历史账单更新</el-button>
        </el-button-group>
      </el-col>
    </template>
    <template v-else>
      <el-col :lg="{span: 4, offset: 1}">
        <el-button-group>
          <el-button @click="query" type="primary">查询</el-button>
          <el-button @click="query" type="primary">实时刷新</el-button>
        </el-button-group>
      </el-col>
    </template>

    <el-dialog class="nam" title="添加" v-model="addForms" :close-on-click-modal="false"
               @close="unset('addForm')">
      <el-form :model="addForm" label-width="80px" ref="addForm" :rules="rules">
        <template v-for="(item,index) in items" v-if="item.add">
          <template v-if="item.options">
            <template v-if="item.option">
              <el-form-item :label="item.label" :prop="item.prop">
                <el-select style="width: 200px;" multiple v-model="addForm[item.prop]" clearable
                           placeholder="请选择">
                  <el-option
                    v-for="i in options"
                    :key="i.value"
                    :label="i.label"
                    :value="i.value">
                    <el-tooltip class="item" effect="dark" :content="i.description" placement="right">
                      <span>{{ i.label }}</span>
                    </el-tooltip>
                    <el-tree
                      :data="i.children"
                      :props="defaultProps"
                      default-expand-all>
                    </el-tree>
                  </el-option>
                </el-select>
              </el-form-item>
            </template>
            <template v-else-if="item.op">
              <el-form-item :label="item.label" :prop="item.prop">
                <el-select style="width: 200px" v-model="addForm[item.prop]" clearable
                           placeholder="请选择">
                  <el-option
                    v-for="i in options"
                    :key="i.get('value')"
                    :label="i.get('label')"
                    :value="i.get('value')">
                    <el-tooltip class="item" effect="dark" :content="i.get('description')" placement="right">
                      <span>{{ i.get('label') }}</span>
                    </el-tooltip>
                  </el-option>
                </el-select>
              </el-form-item>
            </template>
            <template v-else-if="item.optio">
              <el-form-item :label="item.label" :prop="item.prop">
                <el-select style="width: 200px" v-model="addForm[item.prop]" clearable
                           placeholder="请选择">
                  <el-option
                    v-for="i in options"
                    :key="i.get('value')"
                    :label="i.get('label')"
                    :value="i.get('value')">
                  </el-option>
                </el-select>
              </el-form-item>
            </template>
            <template v-else>
              <el-form-item :label="item.label" :prop="item.prop">
                <el-select style="width: 200px" v-model="addForm[item.prop]" clearable
                           placeholder="请选择">
                  <el-option
                    v-for="i in item.options"
                    :key="i.value"
                    :label="i.label"
                    :value="i.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </template>
          </template>
          <template v-else-if="item.dateSelect">
            <el-form-item :label="item.label" :prop="item.prop">
              <el-date-picker
                v-model="addForm[item.prop]"
                type="date"
                :default-value="item.defaultval"
                placeholder="选择日期" style="width: 200px" :disabled="item.disabled">
              </el-date-picker>
            </el-form-item>
          </template>
          <template v-else-if="item.numbers">
            <el-form-item :label="item.label" :prop="item.prop">
              <el-input-number v-model="addForm[item.prop]" :step="2" style="width: 200px;"></el-input-number>
            </el-form-item>
          </template>
          <template v-else-if="item.upload">
            <el-form-item :label="item.label" :prop="item.prop">
              <el-upload
                id="img"
                v-model="addForm[item.prop]"
                class="upload-demo"
                :action="item.path"
                :file-list="fileList"
                :auto-upload="true"
                ref="upload"
                :on-success="handlePreview"
                :before-upload="beforeUp"
                :on-remove="remove"
                name="images">
                <el-button size="small" type="primary">点击上传</el-button>
                <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
              </el-upload>
            </el-form-item>
          </template>
          <template v-else>
            <el-form-item :label="item.label" :prop="item.prop">
              <el-input v-model="addForm[item.prop]" auto-complete="off" style="width: 200px;"></el-input>
            </el-form-item>
          </template>
        </template>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="unset('addForm')">取消</el-button>
        <el-button type="primary" @click.native="addSubmit('addForm')">提交</el-button>
      </div>
    </el-dialog>
    <el-dialog title="详细信息" :visible.sync="updateForms"
               :close-on-click-modal="false" style="width: 800px; margin: 180px auto;">
      <el-form :model="updateForm" label-width="80px" :rules="ru" ref="updateForm">
        <el-form-item label="对账日期" prop="dates">
          <el-date-picker
            v-model="updateForm.dates"
            type="date"
            placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
      </el-form>
      <!--<el-form-item>-->
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="updateForms = false">取消</el-button>
        <el-button type="primary" @click="submitForm('updateForm')">开始</el-button>
      </div>
      <!--</el-form-item>-->
    </el-dialog>
  </el-row>
</template>

<script>
  import moment from 'moment'

  export default {
    name: 'Que',
    data() {
      var validateDate = (rule, value, callback) => {
        var today = new Date()
        var todays = moment(today).format('YYYY-MM-DD 00:00:00')
        var values = moment(value).format('YYYY-MM-DD 00:00:00')
        if (values >= todays) {
          callback(new Error('请选择今天之前的日期'))
        } else if (!value) {
          callback(new Error('请选择日期'))
        } else {
          callback()
        }
      }
      return {
        querys: [],
        addForm: {},
        updateForms: false,
        label: '',
        value: '',
        defaultProps: {
          children: 'children',
          label: 'label'
        },
        fileList: [],
        updateForm: {
          dates: ''
        },
        ru: {
          dates: [
            {type: 'date', validator: validateDate, required: true, trigger: 'blur'}
          ]
        }
      }
    },
    props: {
      queList: Array,
      items: Array,
      rules: Object,
      butFlag: Boolean,
      options: Array,
      addForms: Boolean,
      but: Boolean,
      refundData: String
    },
    methods: {
      query() {
        this.$emit('query', this.querys)
      },
      add() {
//        this.addForms = true
        this.$emit('shows', '')
      },
      addSubmit(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.$emit('add', this.addForm)
          }
        })
      },
      del() {
        this.querys = []
      },
      unset(formName) {
//        this.addForms = false
        this.$emit('showss', '')
        this.$refs[formName].resetFields()
        this.fileList = []
      },
      handlePreview(res, file) {
        console.log("success:" + res)
        console.log(this.fileList.length)
        this.addForm.imgUrl = res
      },
      beforeUp(file) {
        console.log(this.fileList.length)
        if (this.addForm.imgUrl === undefined) {
        // if (this.fileList.length === 0) {
          var image = new Image()
          image.src = file
          const isJPG = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg'
          const isLt2M = file.size / 1024 / 1024 < 2
          // const isSize = image.width / image.height === 5 / 3
//
          if (!isJPG) {
            this.$message.error('请上传图片')
          }
          if (!isLt2M) {
            this.$message.error('上传图片大小不能超过 2MB!')
          }
//          if (!isSize) {
//            this.$message.error('上传图片尺寸长/宽应为5/3')
//          }a
          return isJPG && isLt2M
        } else {
          this.$message.error('只能上传单张图片')
          return false
        }
      },
      remove(file, fileList) {
        this.addForm.imgUrl = undefined
      },
      refund() {
        if (this.refundData === '') {
          this.$alert('请选择订单', '提示', {
            confirmButtonText: '确定'
          })
        } else {
          this.$prompt('请填写发起退款理由(选填)', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消'
          }).then(({value}) => {
            this.$emit('reason', value)
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '取消退款操作'
            });
          });

//          this.$emit('refundLast', this.refundData)
        }
      },
      refresh() {
        this.updateForms = true
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.updateForms = false
            this.$emit('refresh', this.updateForm.dates)
            this.$refs[formName].resetFields()
          }
        })
      }
    }
  }

</script>
<style>
  .names {
    text-align: center;
    font-size: 12pt;
    margin-left: 20px;
    margin-top: 8px;
  }

  .nam {
    width: 754px;
    margin: 65px auto;
  }

  .el-dialog__wrapper {
    margin: 0 auto !important;
  }
</style>
